new Vue({
  el: '#app',
  data: {
    userInput: '',
    messages: [
      {
        name: '小卡',
        content: '欢迎👏🏻使用蓝河系统卡片生成助手，请描述想要生成的卡片样式',
        sender: 'bot',
        status: 'ongoing',
      }
    ],
    isThinking: false
  },
  methods: {
    sendMessage() {
      const messageContent = this.userInput.trim();
      if (messageContent === '') return;

      // 显示用户的消息
      this.messages.push({
        name: '用户',
        content: messageContent,
        sender: 'user'
      });
      this.$nextTick(this.scrollToBottom)

      // 模拟AI响应
      this.isThinking = true;

      $.ajax({
        url: "/code/generate",
        type: "GET",
        timeout: 600*1000,
        data: {
          text: messageContent
        },
        error:() => {
          alert('请求超时，刷新浏览器后重试')
        },
        success: (response) => {
          if (String(response.code) != '200') {
            alert('请求超时，刷新浏览器后重试')
            return;
          }
          console.log(response)
          this.messages.push({
            name: '小卡',
            content: marked.parse(response.repay),
            sender: 'bot',
            status: response.status,
            filename: response.file_name,
            json_data: response.json_data
          });
          this.$nextTick(() => {
            this.scrollToBottom()
          })
        },
        complete: () => {
          this.isThinking = false;
        }
      });

      this.userInput = ''; // 清空输入框
      this.scrollToBottom();
    },
    scrollToBottom() {
      const chatMessages = this.$el.querySelector('.chat-messages');
      chatMessages.scrollTop = chatMessages.scrollHeight;
    }
  }
});